<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平导航栏</title>
    <style>
        /*
        有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。
        这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。*/


        /*例子中链接有不同的宽度*/
        ul
        {
            list-style-type:none;
            margin:0;
            padding:0;
            padding-top:6px;
            padding-bottom:6px;
        }
        li
        {
            display:inline;/*display:inline; -默认情况下，<li>元素是块元素。在这里，我们删除换行符之前和之后每个列表项，以显示一行。*/
        }
        a:link,a:visited
        {
            font-weight:bold;
            color:#FFFFFF;
            background-color:#98bf21;
            text-align:center;
            padding:6px;
            text-decoration:none;
            text-transform:uppercase;
        }
        a:hover,a:active
        {
            background-color:#7A991A;
        }


    </style>
</head>
<body>
<ul>
    <li><a href="#home">主页ssss</a></li>
    <li><a href="#news">新闻</a></li>
    <li><a href="#contact">联系</a></li>
    <li><a href="#about">关于</a></li>
</ul>
</body>
</html>